<template>
  <div class="page-con" :class="screenClass">
    <table-container
      v-model:columns="columns"
      v-model:is-fullscreen="isFullscreen"
      :loading="isLoading"
      :all-columns="allColumns"
      @refresh="getData"
    >
      <template #container-side
        >左侧自定义内容, container-side和普通表格结合</template
      >
      <a-table :columns="columns" :data="renderData" :loading="isLoading" />
    </table-container>
  </div>
</template>

<script lang="ts" setup>
  import tableContainer from '@/common/components/table-container/index.vue';
  import { reactive, ref } from 'vue';
  import { sleep } from '@/utils/tools';
  import lodash from 'lodash';
  import useFullScreen from '@/common/hooks/fullScreen';

  const { isFullscreen, screenClass } = useFullScreen();

  const columns = ref([
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Salary',
      dataIndex: 'salary',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
    {
      title: 'Email',
      dataIndex: 'email',
    },
  ]);
  const allColumns = lodash.cloneDeep(columns);
  const isLoading = ref(true);
  const renderData = ref<any[]>([]);

  const getData = async () => {
    renderData.value = [];
    isLoading.value = true;
    await sleep(2000);
    const data = reactive([
      {
        key: '1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com',
      },
      {
        key: '2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com',
      },
      {
        key: '3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com',
      },
      {
        key: '4',
        name: 'Ed Hellen',
        salary: 17000,
        address: '42 Park Road, London',
        email: 'ed.hellen@example.com',
      },
      {
        key: '5',
        name: 'William Smith',
        salary: 27000,
        address: '62 Park Road, London',
        email: 'william.smith@example.com',
      },
    ]);
    renderData.value = data;
    isLoading.value = false;
  };

  getData();
</script>

<style lang="less" scoped>
  .page-con {
    height: 100%;
    padding: 20px;
    background-color: #fff;
  }
</style>
